<!--  -->
<template>
  <div class="page-container">
    <el-card>
      <el-form class="query-form" inline label-width="75px">
        <el-form-item label="手机号:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="状态:" class="elselect">
          <el-select clearable v-model="query.states">
            <el-option
              v-for="item in statesList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="时间:">
          <el-date-picker
            v-model="times"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            @change="changeTime"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="pd-12">搜索</el-button>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row class="mgt-20">
      <el-button type="warning" class="pd-15">批量上架</el-button>
      <el-button type="danger" class="pd-15">批量下架</el-button>
    </el-row>
    <el-table
      class="mgt-20"
      :data="tableList"
      row-key="id"
      border
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品ID" prop="tradeTime" />
      <el-table-column label="商品名称" prop="projectName" />
      <el-table-column label="状态" prop />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="query.pageNo"
      v-model:page-size="query.pageSize"
      :total="total"
      @current-change="getListData"
    />
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      query: {
        pageNo: 0,
        pageSize: 1
      },
      total: 0, // 总条数
      tableList: [],
      statesList: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '已下单',
          value: 1
        },
        {
          label: '备货中',
          value: 2
        },
        {
          label: '部分发货',
          value: 3
        }
      ], // 状态
      selection: [], // 选择的数据
      times: '' // 时间
    })
    const handleEdit = (data) => {
      console.log(data)
    }
    // 获取列表数据
    const getListData = () => {
      console.log()
    }
    // const GET = async () => {
    //   try {
    //     const params = toRaw(state.query)
    //     const res = await batchUpdate(params)
    //     console.log(res)
    //     state.tableList = res.data
    //     state.total = res.totalCount
    //   } catch (e) {
    //     console.log(e)
    //   }
    // }
    // 列表多选回调
    const onSelectionChange = (selection) => {
      state.selection = selection
      console.log(state.selection.length)
    }
    // 时间
    const changeTime = () => {
      console.log(state.times)
    }

    return {
      ...toRefs(state),
      handleEdit,
      getListData,
      onSelectionChange,
      changeTime
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .query-form {
    :deep(.el-form-item) {
      margin-right: 15px !important;
    }
    :deep(.el-form-item--small) {
      margin: 8px !important;
    }
    :deep(.el-input__inner) {
      width: 150px;
      height: 25px;
    }
    // 时间
    :deep(.el-date-editor--daterange) {
      height: 26px;
    }
    .elselect {
      :deep(.el-input__inner) {
        width: 130px;
        height: 25px;
      }
    }
  }
}
</style>
